<template>
  <div>
    <h2>基础用法（双向绑定）：</h2>
    &lt;Rating v-model="rating" /&gt;
    &lt;p>当前评分：{{ rating }} &lt;/p&gt;
    <!--下面是调用代码-->
    <Rating v-model="rating" />
    <p>当前评分：{{ rating }}</p>


    <h2>半星评分（带自定义样式）：</h2>
    <p><code>&lt;Rating
        v-model="rating2"
        :allow-half-star="true"
        active-color="#ff6b6b"
        inactive-color="#ced4da"
        size="32px"
        gap="8px"
      /&gt; </code></p>
    <!--下面是调用代码-->
    <Rating
        v-model="rating2"
        :allow-half-star="true"
        active-color="#ff6b6b"
        inactive-color="#ced4da"
        size="32px"
        gap="8px"
    />


    <h2>禁用状态（只读模式）：</h2>
      <p><code>&lt;Rating
        :model-value="4"
        :readonly="true"
        :disabled="true"
        size="20px"
        /&gt; </code></p>
    <!--下面是调用代码-->
    <Rating
        :model-value="4"
        :readonly="true"
        :disabled="true"
        size="20px"
    />
  </div>

</template>

<script setup>
import { ref } from 'vue'
import Rating from '@/components/Rating/Rating.vue'

const rating = ref(3)
const rating2 = ref(4.5)
</script>

